<template>
    <div class="col card p10" style="max-height: 350px;">
        <label style="align-self: center;" class="title">软件更新({{ ctx.prog }})</label>
        <div class="row_center mt">
            <label class="less">主控板版本:</label>
            <label class="less">{{ mainState.version }}</label>
        </div>
        <div class="row_center mt">
            <label class="less">加热板版本:</label>
            <label class="less">{{ heatState.version }}</label>
        </div>
        <div class="row_center mt">
            <label class="less">称重板版本:</label>
            <label class="less">{{ weightState.version }}</label>
        </div>
        <div class="row_center mt">
            <label>控制板</label>
            <el-select class="ml" v-model="ctx.ctrl" style="width: 130px;">
                <el-option
                    :value="MAIN"
                    :label="MAIN"/>
                <el-option
                    :value="HEAT"
                    :label="HEAT"/>
                <el-option
                    :value="WEIGHT"
                    :label="WEIGHT"/>
            </el-select>
            <el-button @click="onClickGet" class="ml" type="success">获取</el-button>
        </div>
        <div class="col" style="overflow-y: scroll;">
            <div class="card2 p10 mt" v-for="(item, index) in ctx.dev_file_infos"
                :key="index">
                <div class="row_center">
                    <label class="less">文件名:</label>
                    <label class="less">{{ item.name }}</label>
                </div>
                <div class="row_center">
                    <label class="less">更新日期:</label>
                    <label class="less">{{ item.date }}</label>
                </div>
                <div class="row_center">
                    <label class="less">软件版本:</label>
                    <label class="less">{{ item.version }}</label>
                </div>
                <div class="row_center">
                    <label class="less">版本描述:</label>
                    <label class="less">{{ item.description }}</label>
                </div>
                <div class="row_center mt" style="justify-content: flex-end;">
                    <el-button @click="onClickUpdate(item.id)"  type="primary">更新</el-button>
                </div>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">

import { reactive } from 'vue';
import { query_heat, download, query_main, query_weight, DevFileInfo } from '../service/http';
import conn from '../service/conn';
import { addr } from '../service/proto';
import { dialog } from '../service/ui';
import { heatState } from '../service/heat_def';
import { weightState } from '../service/weight_def';
import { mainState } from '../service/main_def';
import { delay } from '../service/utils';

const MAIN = "主控板";
const HEAT = "加热控制板";
const WEIGHT = "称重控制板";

interface Ctx {
    ctrl: string,
    dev_file_infos: DevFileInfo[],
    prog: number,
}

const ctx = reactive<Ctx>({
    ctrl: HEAT,
    dev_file_infos: [],
    prog: 0,
});

async function onClickGet() {
    ctx.dev_file_infos = [];
    await delay(50);
    if (ctx.ctrl == HEAT) {
        ctx.dev_file_infos = await query_heat();
    } else if (ctx.ctrl == MAIN) {
        ctx.dev_file_infos = await query_main();
    } else if (ctx.ctrl == WEIGHT) {
        ctx.dev_file_infos = await query_weight();
    }
}

async function onClickUpdate(id: number) {

    try {
        const buf = await download(id);
        dialog.succ('下载成功');
        let dst = addr.HEAT;
        if (ctx.ctrl == HEAT) {
            dst = addr.HEAT;
        } else if (ctx.ctrl == MAIN) {
            dst = addr.MAIN;
        } else if (ctx.ctrl == WEIGHT) {
            dst = addr.WEIGHT;
        }
        ctx.prog = 0;
        await conn.ota(dst, buf, (prog) => {
            ctx.prog = Math.floor(prog);
        });
    } catch (msg) {
        dialog.err(msg);
    }
}

onClickGet();

</script>
